<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>{{count}}</h1>
    <h1>{{douCount}}</h1>
    <button @click="plus">加1</button>
  </div>
</template>
<script lang="ts">
//1 vue3中 beforeCreate 和created 用setup替换

// setup 准备     根元素未准备就绪  无法操作dom 方法和数据都可以使用
// setUp 要有返回值
// ref vue3创建一个响应式的数据
// vue3最大的新特性是Component Api 
//  ref,computed
import {ref,computed} from 'vue'
export default {
    setup() {
        // 处理count的模块
        let count=ref(0); //count数据 
        let plus=()=>{ //count模块的方法
          // vue3 ref创建的响应式数据 使用 数据.value
            count.value++
        }
        let douCount=computed(()=>{ //count数据的计算属性
            return count.value*2
        }) 
        return {
          count,
          plus,
          douCount
        }
    }
} 
</script>
